<template>
	<view class="newlist">
		<view class="newlist-left">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
								<view  class="scroll-view-item " :class="[{ 'scroll-view-item-active': listId == index }]" v-for="(item,index) in categoryData" :key="item.id" @click="onType(index)">
									<view class="line" :class="[{ 'line-active':  listId == index }]"></view>
									{{item.name}}
								</view>
								
						
					</scroll-view>
		</view>
		<view class="newlist-right">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
				
				<view class="scroll-2" v-if="categoryData.length">
					<view class="banner"  v-if="categoryData[listId].image">
						<image class="type-img" :src="categoryData[listId].image" mode="aspectFill"></image>
					</view>
							<view  class="scroll-view-item" v-for="(list, index1) in categoryData[listId].children" :key="index1" @tap="jump('/pages/goods/list', { id: list.id })" >
								<view class="img">
									<image lazy-load :src="list.image"  mode="aspectFill"></image>
								</view>
								<view class="text">
									{{list.name}}
								</view>
							</view>
							
							
							<shopro-empty
								v-if="!categoryData[listId].children.length"
								:image="$IMG_URL + '/imgs/empty/empty_goods.png'"
								tipText="暂无该商品，还有更多好货等着你噢~"
								
							></shopro-empty>
				</view>
					
			
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			categoryStyleId: {
				type: Number,
				default: 0
			}
		},
		async created() {
			console.log('%c当前分类：三级分类', 'color:green;background:yellow');
			await this.getCategory();
		},
		data(){
			return {
				listId: 0,
				categoryData: {},
				scrollTop:0
			}
		},
		methods:{
			getCategory() {
				this.$http('category.detail', {
					id: this.categoryStyleId
				}).then(res => {
					console.log(res);
					if (res.code === 1) {
						this.categoryData = res.data.children;
						// console.log(	this.categoryData,'	this.categoryData');
					}
				});
			},
			onType(id) {
				this.listId = id;
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.newlist {
		min-height: 100vh;
		display: flex;		
		.newlist-left {
			min-height: 100vh;
			width: 200rpx !important;
			
			background-color: #fff;
			
			
			.scroll-Y {
					height: 100vh;
					background-color: #f7f7f7;
				}
				.scroll-view-item {
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
	
					color: rgba(102, 102, 102, 1);
					position: relative;
					.line {
						width: 10rpx;
						height: 60%;
						position: absolute;
						transform: translateY(-50%);
						top: 50%;
						
						left:0;
						// background-color: #fff;
					}
					.line-active {
						background-color: red;
					}
				}
				.scroll-view-item-active {
					background-color: #fff;
				font-weight: 900;
				color: #333;
				}
			
			
			
			
		}
		.newlist-right {
			min-height: 100vh;
			width: 550rpx;
			background-color: #fff;
			
			.scroll-Y {
				width: 100%;
				height: 100vh;
				// background-color: aquamarine;
			
				.scroll-2 {
					
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					padding: 20rpx;
					box-sizing: border-box;
					
					
					
					
				}
				// .shopro-empty-wrap {
				// 	margin-top: 20rpx;
				// }
				
				.banner {
					width: 505rpx;
					height: 250rpx;
					background-color: #f7f7f7;
					margin-bottom: 30rpx;
					border-radius: 10rpx;
					overflow: hidden;
					.type-img {
						width: 100%;
						height: 100%;
					}
				}
				.scroll-view-item {
					width: 240rpx;
					height: 280rpx;
					background-color: #f7f7f7;
					margin-bottom: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					.img {
						width: 240rpx;
						height:240rpx;
						image {
						width: 240rpx;
						height:240rpx;	
						}
					}
					.text {
						text-align: center;
							font-size: 24rpx;
							line-height: 40rpx;
					}
				}
	
			}
			
			
			
		}
	}

	
</style>